<!-- 文章列表 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label">文章列表</p>
        <div class="mt10">
            
            <dxtable :headBtn="headBtn" :dataJson="dataJson" :portUrl="portUrl" :qx="qx" ref="databale"
                sonRouter="wzArticleEditor"  :czFun="czFun"></dxtable>
        
        </div>
    </div>
</template>
<script lang='ts' setup>
import dxtable from "../../components/util/dxtable.vue";
import sort from "../../components/util/sort.vue";
import { dxget, dxpost, qurl, hf } from "../../util/index";
import { NButton } from "naive-ui"
import { h, ref, reactive } from "vue";
const cz = qurl()
const props = defineProps({
    pup: { type: String },
});
const isshow = ref()

let headBtn = [];
const zdList = ref()
const databale = ref();
const initeer = () => {
    databale.value.initDataExpose();
};
const emit = defineEmits(["callBack"]);
// 弹窗公用该列表
let dataJson = reactive([
{
        title: "id",
        key: "id",
        width:50
    },
    {
        title: "文章标题",
        key: "title",
        width:240,
        search: true, // 是否在搜索栏展示
    },
    {
        title: "封面",
        key: "cover",
        width:100,
        render(row){
           if( row.banner){
            return h("img",{class:"fmjkjser imgjz",src:row.banner})
           }
        }
    }, 
    {
        title: "省份",
        key: "provinceText",
        width:80,
    },
    {
        title: "城市",
        key: "cityText",
        width:80,
    },
    {
        title: "收藏数量",
        key: "upvote",
        width:100,
    },{
        title: "浏览数量",
        key: "lookOver",
        width:100,
    },
    {
        title: "审核状态",
        width:100,
        render(row) {
            if(row.state==2){
               return h("span",{class:"red"},'待审核')
            }else{
                return  h("span",{class:"ls"},'审核通过')
            }
        },
    },
    {
        title: "排序",
        width: 100,
        render(row) {
            row.databaseName = "xlxproduct";
            return h(sort, {
                row,
                onCallBack: () => {
                    initeer();
                },
            });
        },
    },
    {
        title: "创建时间",
        key: "addTime",
        width: "100",
        type: "daterange",
    },
]);
let portUrl = "wzfb/wzArticleManagement?openid="+(cz.uid||'');
const qx = {
    DeletePermissionID: "ArticlePublishingListdel", //删除
    EditPermissionIdentifier: "ArticlePublishingListbj", // 编辑
    NewPermissionIdentifier: "ArticlePublishingListxz", // 新建
    ViewPermissionID: "ArticlePublishingListck", // 查看
};

let formJson = ref([
  {
    title: "文章标题",
    type: "input",
    key: "title",
    span:24
  }, {
    title: "简介",
    type: "textarea",
    key: "synopsis",
    span:24
  }, {
    title: "描述",
    type: "textarea",
    key: "describe",
    span:24
  },
  {
    title: "图片",
    type: "img",
    key: "imglist",
    span:24
  },
  
])


const czFun = {
    fun: (row) => {
        const wzlx = row.state
        return [
            h(
                NButton,
                {
                    type: "info",
                    quaternary: true,
                    onClick: async (e) => {
                        await dxget("wzfb/api/ChangeState",{
                            id:row.id,
                            state:(row.state=="1"?2:1)
                        })
                        window.$message.success("操作成功！")
                        initeer();
                    },
                },
                wzlx==1?'下架':'上架'
            ),
        ];
    },
};

</script>
  
  
  